<template>
	<div class="page">
		<p class="title">基本用法（等效于fit=fill）</p>
		<gr-image :src="src1" width="100px" height="100px"/>
		
		<p class="title">填充模式（contain）</p>
		<div style="background-color: #ccc; display: inline-block;">
			<gr-image :src="src1" width="100px" height="100px" fit="contain"/>
		</div>
		
		<p class="title">填充模式（cover）</p>
		<div style="background-color: #ccc; display: inline-block;">
			<gr-image :src="src1" width="100px" height="100px" fit="cover"/>
		</div>
		
		<p class="title">填充模式（none）</p>
		<div style="background-color: #ccc; display: inline-block;">
			<gr-image :src="src1" width="100px" height="100px" fit="none"/>
		</div>
		
		<p class="title">圆形图片</p>
		<div style="display: flex; flex-wrap: wrap; justify-content: space-between;">
			<div>
				<gr-image :src="src1" width="80px" height="80px" round fit="fill"/>
				<p style="text-align: center;">fill</p>
			</div>
			<div>
				<gr-image :src="src1" width="80px" height="80px" round fit="contain"/>
				<p style="text-align: center;">contain</p>
			</div>
			<div>
				<gr-image :src="src1" width="80px" height="80px" round fit="cover"/>
				<p style="text-align: center;">cover</p>
			</div>
			<div>
				<gr-image :src="src1" width="80px" height="80px" round fit="none"/>
				<p style="text-align: center;">none</p>
			</div>
		</div>
		
		<p class="title">加载状态提示</p>
		<div>
			<gr-image :src="src1" width="100px" height="100px" loadingText="加载中" /> &nbsp;
			<gr-image src="xxxxx" width="100px" height="100px" errorText="加载失败" /> &nbsp;
			<gr-image src="xxxxx" width="100px" height="100px" round/>
		</div>
		
		<p class="title">懒加载</p>
		<div>
			<gr-image :src="src1" width="100px" height="100px" lazyload/> &nbsp;
			<gr-image :src="src1" width="100px" height="100px" lazyload /> &nbsp;
			<gr-image :src="src1" width="100px" height="100px"/>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				src1: require('../../assets/mme.jpg')
			}
		},
		mounted() {
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.page {
		padding: 0 10px 20px;
	}
</style>
